<!DOCTYPE html>
<html>
    <head>
        <title>Transitioning on hover</title>
        <style>
            #square {
                position          :absolute;
                top               :50px;
                left              :50px;
                width             :100px;
                height            :100px;
                padding           :2px;
                text-align        :center;
                border-width      :1px;
                border-style      :solid;
                background        :orange;
                transition        :all .8s ease-in-out;
                -moz-transition   :all .8s ease-in-out;
                -webkit-transition:all .8s ease-in-out;
                -o-transition     :all .8s ease-in-out;
                -ms-transition    :all .8s ease-in-out; }
            #square:hover {
                background        :yellow;
                -moz-transform    :rotate(180deg);
                -webkit-transform :rotate(180deg);
                -o-transform      :rotate(180deg);
                -ms-transform     :rotate(180deg);
                transform         :rotate(180deg); }
        </style>
    </head>
    <body>
        <div id='square'>
            Square shape<br />
            created using<br />
            a simple div<br />
            element with<br />
            a 1px border
        </div>
    </body>
</html>
